<template>
	<view>
		<view class="headDiv padding">
			<cu-custom :isBack="false" bgColor="none-bg text-white">
				<block slot="content"></block>
				<block slot="right"></block>
			</cu-custom>
			<view class="cu-avatar-box">
				<navigator url="/pagesB/login/login" class="uni-flex margin-bottom-sm">
					<view class="cu-avatar lg round margin-right" 
					:style="(user!=null)?'background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg)':'background-image:url(/static/logo.png)'"></view>
					<view style="flex: 1;" v-if="user!=null">
						<view class="cu-avatar-name">{{user.Name}}</view>
						<view class="cu-avatar-num"><img src="/static/label/lable_hy.png" class="label-box kind4" /></view>
					</view>
					<view style="flex: 1;" v-if="user==null">
						<view class="cu-avatar-name line2">请登录</view>
					</view>
					<view class="setting"><image src="/static/setting.png"></image></view>
				</navigator>
			</view>
			<view>
				<view class="cu-list grid col-4 no-border black">
					<view class="cu-item">
						<navigator url="pages/tabindex/msg/msg">
							<text class="f20">99+</text>
							<text>浏览</text>
						</navigator>
					</view>
					<view class="cu-item">
						<navigator url="pages/tabindex/msg/msg">
							<text class="f20">2</text>
							<text>收藏</text>
						</navigator>
					</view>
					<view class="cu-item">
						<navigator url="pages/tabindex/msg/msg">
							<text class="f20">2</text>
							<text>关注</text>
						</navigator>
					</view>
					<view class="cu-item">
						<navigator url="pages/tabindex/msg/msg">
							<text class="f20">20</text>
							<text>评价</text>
						</navigator>
					</view>
				</view>			
			</view>
		</view>
		<view class="head2Div padding">
			<view class="cu-list grid col-4 no-border shadow-warp">
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon_qb.png" class="menu-icon" />
						<text>钱包</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon_td.png" class="menu-icon" />
						<text>团队</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon_ycb.png" class="menu-icon" />
						<text>易传播</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon_sj.png" class="menu-icon" />
						<text>商家</text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="model-header">
			<text class="model-header-title">我的订单</text>
		</view>
		<view class="head3Div">
			<view class="cu-list grid col-4 no-border">
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon2_kf.png" class="menu-icon" />
						<text>看房订单</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon2_bm.png" class="menu-icon" />
						<text>报名订单</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon2_wt.png" class="menu-icon" />
						<text>委托订单</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon2_sp.png" class="menu-icon" />
						<text>商品订单</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon2_fw.png" class="menu-icon" />
						<text>服务订单</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon2_zx.png" class="menu-icon" />
						<text>装修订单</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon2_tj.png" class="menu-icon" />
						<text>推荐订单</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator url="pages/tabindex/msg/msg">
						<image src="/static/mine/icon2_jr.png" class="menu-icon" />
						<text>金融订单</text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="model-header">
			<text class="model-header-title">我的发布</text>
		</view>
		<view class="cu-list menu sm-border">
			<view class="cu-item arrow">
				<view class="content">
					<image src="/static/mine/tool_fy.png" class="png" mode="aspectFit"></image>
					<text class="text-grey">我的房源</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<image src="/static/mine/tool_qg.png" class="png" mode="aspectFit"></image>
					<text class="text-grey">我的求购</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<image src="/static/mine/tool_qz.png" class="png" mode="aspectFit"></image>
					<text class="text-grey">我的求租</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<image src="/static/mine/tool_wt.png" class="png" mode="aspectFit"></image>
					<text class="text-grey">我的委托</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<image src="/static/mine/tool_rw.png" class="png" mode="aspectFit"></image>
					<text class="text-grey">我的热文</text>
				</view>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="cu-tabbar-height wx"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:null
			};
		},
		onShow() {
			let _this = this;
			uni.getStorage({
				key: 'user',
				success: function(res) {
					console.log(res.data);
					_this.user = res.data;
				}
			});
		},
		methods: {
			login() {
				let data = {
					Account:13800000001,
					Password:"123456aa"
				}
				uni.request({
					url: this.AjaxUrl+'/Account/HPLogin',
					method:"POST",
					data:data,
					success: (res) => {
						if (res.statusCode == 200) {
							console.info(JSON.parse(res.data.Extend));
							uni.setStorage({
								key: 'user',
								data: JSON.parse(res.data.Extend),
								success: function() {
									console.log('3success');
								}
							});
						}
					},
					fail:function(e){
						console.info("报错了",e);
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.cu-list.grid{
		padding: 0;
		.cu-item{
			padding: 20upx 0;
			text{
				font-size: 28upx;
				margin-top: 0;
				color: #333333;
				&.f20{
					font-size: 40upx;
				}
			}
		}
		&.black{
			background: #21243d;
			.cu-item{
				text{
					margin-top: 10upx;
					color:#FFFFFF;
				}
			}
		}
	}
	.menu-icon{
		width: 90upx;
		margin: 0 auto;
		height: 90upx;
	}
	.headDiv{
		background: #21243d;
		color: #FFFFFF;
		padding-bottom: 60upx;
	}
	.head2Div{
		padding: 0 30upx 30upx;
		margin-top: -60upx;
	}
	.head3Div{
		padding: 0 30upx 30upx;
	}
	.cu-avatar-box{
		.cu-avatar-name{
			font-size: 36upx;
			line-height: 48upx;
			&.line2{
				line-height: 96upx;
			}
		}
		.cu-avatar-num{
			font-size: 28upx;
			line-height: 48upx;
		}
		.cu-avatar-main{
			line-height: 1.5;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
	}
	.label-box{
		height: 32upx;
		margin-right: 10upx;
		display: inline-block;
		vertical-align: text-top;
		&.kind1{
			width:84upx;
		}
		&.kind2{
			width:34upx;
		}
		&.kind3{
			width:58upx;
		}
		&.kind4{
			width:108upx;
		}
	}
	.model-header{
		font-size: 32upx;
		padding: 30upx 30upx 20upx;
		line-height: 1;
		font-weight: 600;
	}
	.setting{
		flex-shrink:0;width:6vw;height:6vw;
		image{width:100%;height:100%}
	}
</style>
